<template>
  <div class="order-goods">
    <van-cell-group>
      <van-cell v-for="(item, i) in goods" :key="i">
        <order-item :goods="item" :checkbox="false" :minNum=1 @onNumChange="item.total = $event" @cartChange="cartChange"/>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="商品总数">
        <b class="item_text">{{totalNum}}</b>
      </van-cell>
      <van-cell title="商品金额">
        <span class="price_text"><b class="item_text">{{totalPrice | yuan(false)}}</b></span>
      </van-cell>
      <van-cell title="实付金额">
        <span class="price_text"><b class="item_text">{{payPrice | yuan(false)}}</b></span>
      </van-cell>
      <van-cell title="公益金额" v-if="gongyiPrice > 0">
        <span class="price_text"><b class="item_text">{{gongyiPrice | yuan(false)}}</b></span>
      </van-cell>
      <van-cell title="优惠金额" @click="showCoupon = (coupons.length > 0)">
        <div slot="right-icon" class="order_text">
          <div>
            <span class="price_text"><b>{{discountPrice.toFixed(2)}}</b></span>
            <div class="coupon_info"><u>{{couponInfo}}</u></div>
          </div>
        </div>
      </van-cell>
      <!-- 商品赠品 -->
      <van-cell v-if="giveGift" class='giveCell'>
        <div slot="title" class="zp">
         <span>赠品</span>
        </div>
        <div slot="right-icon" class="gift_text zpmsg">
            <img v-lazy="giveGift.productUrl"/>
            <div style="display:inline-block;padding-left: 6px;">
              <div class="gift_name">{{giveGift.productName}}</div>
              <div class="gift_num">×{{giveGift.giftNum}}</div>
              <!-- 赠品的库存 -->
              <div v-if='giveGift.total' class="kucun">库存{{giveGift.total}}</div>
              <div v-else class="kucun">库存不足</div>
            </div>
            
        </div>
      </van-cell>
    </van-cell-group>
    <van-popup v-model="showCoupon" position="right" class="popup_panel" v-if="coupons">
        <van-nav-bar class="nav_bar" title="选取优惠券" left-text="返回" right-text="放弃使用" left-arrow @click-left="onSelCoupon"
        @click-right="onCancelSel" />
      <van-radio-group v-model="selIndex" style="margin-top: 50px;">
        <van-list>
          <van-cell-group v-for="(el, i) in coupons" class="coupon_panel" :key="el.id">
            <item-ecoupon :el="el" />
            <van-radio :name="i" style="margin-right: 10px;"/>
          </van-cell-group>
        </van-list>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
import OrderItem from '../order-item';
import { Radio, RadioGroup, NavBar, } from 'vant';
import ItemEcoupon from '@/vue/components/item-ecoupon/';

export default {
  name: "bottom-goods-info",
  props:['goods','coupons','giveGift'],
  data() {
    return {
      remark: "",
      showCoupon: false,
      selIndex: -1,
      // handle:''
    }
  },
  watch: {
    //监听手动改变购物车里面的值
    // handle(ele){
    //   console.log('手动的值')
    //   console.log(ele)
    //   this.$emit("parCartChange",ele)
    // },
    //监听赠品信息的改变
    giveGift(ele){
      this.giveGift = ele;
    },
    // 添加
    coupons(ele){
      this.coupons = ele;
      // 当在提交订单的页面再次修该数据时,再次优惠券初始化
      this.initConpons();
    },
	  payPrice() {
		  this.$emit('payPriceChange', this.payPrice);
    },
    selIndex() {
      this.$emit('couponChange', this.selIndex);
    }
  },
  created() {
    this.initConpons();
  },
  computed: {
    totalNum() {
      return this.goods.reduce((total, item) =>
        total += item.total, 0);
    },

    totalPrice() {
      return this.goods.reduce((total, item) =>
        total += (this.user.isVip && item.vipprice && item.isvip) ? item.vipprice * item.total : item.marketprice * item.total, 0);
    },

    payPrice() {
      return Math.max(this.totalPrice - this.discountPrice, 0);
    },

    gongyiPrice() {
      return this.goods.reduce((total, item) =>
        total += item.gongyiprice * item.total, 0);
    },
    couponInfo() {
      if (this.coupons.length === 0) {
        return '无可用优惠券';
      } else {
        return '有 ' + this.coupons.length + ' 张优惠券可用';
      }
    },
    selCoupon() {
      return this.coupons[this.selIndex];
    },
    discountPrice() {
		if (this.selCoupon) {
      this.$emit('discountAmount',this.selCoupon.deductAmount)
      return this.selCoupon.deductAmount;
    }
    this.$emit('discountAmount',0)
		return 0;
    },
  },
  methods: {
    // 优惠券初始化页面
    initConpons() {
        this.$emit('payPriceChange', this.payPrice);
        let discount = 0;
        let sel = -1;
        //寻找最大优惠券
        this.coupons.forEach((coupon, i) => {
            if (coupon.deductAmount > discount) {
              sel = i;
              discount = coupon.deductAmount;
            }
        })

        if (sel > -1) {
          this.selIndex = sel;
        }
    },
    // 去到赠品页面
    toGift(){
        this.$router.push({path:"/order/gift"})
    },
    cartChange(ele){
      console.log('点击购物车的改变')
      console.log(ele)
      this.$emit("parCartChange",ele)
    },
	  onSelCoupon() {
    // console.log('回传的选择的优惠券的值')
    //将存储在 session 里面的值取出相比较
    let youhuiMon = this.$util.getSessionStorage('youhuiMon')
    if (this.selCoupon.deductAmount !== youhuiMon) {
        this.$emit('fanhuiDis',this.selCoupon.deductAmount);
        //将最新选择的优惠券的值存储到session里面
        this.$util.setSessionStorage("youhuiMon",this.selCoupon.deductAmount);
    }
    this.showCoupon = false;
	},
	onCancelSel() {
    this.$util.setSessionStorage("youhuiMon",0);
    this.$emit('fanhuiDis',-1);
		this.selIndex = -1;
		this.showCoupon = false;
	},
  },
  components: {
    [OrderItem.name]: OrderItem,
	  [Radio.name]: Radio,
	  [RadioGroup.name]: RadioGroup,
	  [NavBar.name]: NavBar,
	  [ItemEcoupon.name]: ItemEcoupon,
  }
}
</script>
<style lang="scss" scoped>
.order-goods {
	background-color: #fff;
  .zp {
    margin-bottom: 10px;
  }
  .zpmsg {
    img {
      width: 105px;
      vertical-align: top;
    }
  }
  .giveCell {
    display: block;
  }
  .gift_text {
    color: gray;
    .gift_name{
      font-size: 12px;
    }
    .gift_num {
      font-size: 12px;
      // text-align: right;
      color:#FF0066;
    }
    .kucun {
      font-size: 12px;
    }
  }
}

.item_text {
	color: $red;
	font-size: 16px;
}

.price_text {
	::before {
		color: $red;
		content: "¥";
		margin-right: 3px;
		font-size: 8px;
	}
}
.order_text {
	color: $red;
	font-size: 16px;
	text-align: right;
	display: flex;
}

.coupon_info {
	color: gray;
	font-size: 10px;
}
.coupon_panel {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	flex: 1;
}

.popup_panel {
	width: 100%;
	height: 100%;
	background-color: $bg-color;
}
.nav_bar {
	background-color: $red;
	color: white;
	position: fixed;
  width: 100%;
  top: 0;
}

</style>
